/**
 * 工厂页与核算进度达成弹框组件
 */
<script setup>
import { ref, watch, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useProgressStore } from '@/stores/factory'
import http from '@/axios/http'

const route = useRoute()
const factory = ref(route.query.factory)

const progressStore = useProgressStore()

const year = ref('')
const month = ref('')
const yearList = ref([])
const monthList = ref([])
const tableData = ref([])

watch([year, month], () => {
  getProgressDetail()
})

function getProgressOther() {
  http.post("/factory/getProgressOther", {
    factory: factory.value
  }).then(res => {
    yearList.value = res.data.yearList
    monthList.value = res.data.monthList
  }).catch(err => {
    console.log(err)
  })
}

function getProgressDetail() {
  http.post("/factory/getProgressDetail", {
    year: year.value,
    month: month.value,
    factory: factory.value
  }).then(res => {
    tableData.value = res.data
  }).catch(err => {
    console.log(err)
  })
}

function beforeOpen() {
  year.value = (new Date()).getFullYear() + ""
  month.value = ((new Date()).getMonth() < 9 ? ("0" + ((new Date()).getMonth() + 1)) : ((new Date()).getMonth() + 1)) + ""

  if (tableData.value.length === 0) {
    getProgressDetail()
  }
}

function afterClose() {
  tableData.value = []
}

onMounted(() => {
  getProgressOther()
  getProgressDetail()
})
</script>

<template>
  <div id="factory-progress-popup">
    <el-dialog
      v-model="progressStore.isShow"
      :title="'与核算进度达成' + (factory ? '（' + factory + '）' : '')"
      top="5vh"
      width="80vw"
      center
      @open="beforeOpen"
      @closed="afterClose"
    >
      <div class="progress-option">
        <div class="progress-option-item">
          <span>年份：</span>

          <el-select
            v-model="year"
            size="large"
            placeholder="请选择年份"
            :teleported="false"
          >
            <el-option
              v-for="item in yearList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </div>
        
        <div class="progress-option-item">
          <span>月份：</span>

          <el-select
            v-model="month"
            size="large"
            placeholder="请选择月份"
            :teleported="false"
          >
            <el-option
              v-for="item in monthList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </div>
      </div>

      <el-table
        :data="tableData"
        empty-text="暂无数据"
        size="large"
        maxHeight="72vh"
        border
      >
        <el-table-column label="部门" width="100" header-align="center" align="center" fixed>
          <template #default="scope">
            {{ scope.row.dept_name !== null ? scope.row.dept_name : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="按实际完工数量核算目标工时" width="110" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.act_ct_hour !== null ? scope.row.act_ct_hour.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="工时预算达成率" width="100" header-align="center" align="center">
          <template #default="scope">
            <span style="color: deepskyblue;">{{ scope.row.ys_rate !== null ? scope.row.ys_rate + '%' : '-' }}</span>
          </template>
        </el-table-column>

        <el-table-column label="预测产量" width="100" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.prod_budget !== null ? scope.row.prod_budget.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="实际产量" width="100" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.prod_finish !== null ? scope.row.prod_finish.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="产量差异" width="100" header-align="center" align="center">
          <template #default="scope">
            <span :style="{ color: scope.row.prod_diff !== null ? (scope.row.prod_diff > 0 ? 'deepskyblue' : 'orangered') : 'black' }">
              {{ scope.row.prod_diff !== null ? (scope.row.prod_diff > 0 ? '+' + scope.row.prod_diff.toLocaleString() : scope.row.prod_diff.toLocaleString()) : '-' }}
            </span>
          </template>
        </el-table-column>

        <el-table-column label="产量差异率" width="110" header-align="center" align="center">
          <template #default="scope">
            <span :style="{ color: scope.row.prod_diffrate !== null ? (scope.row.prod_diffrate > 0 ? 'deepskyblue' : 'orangered') : 'black' }">
              {{ scope.row.prod_diffrate !== null ? (scope.row.prod_diffrate > 0 ? '+' + scope.row.prod_diffrate : scope.row.prod_diffrate) + '%' : '-' }}
            </span>
          </template>
        </el-table-column>

        <el-table-column label="预测直工工时" width="120" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.budget_zggs !== null ? scope.row.budget_zggs.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="预测间工工时" width="120" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.budget_jggs !== null ? scope.row.budget_jggs.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="预测总工时" width="110" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.budget_zgs !== null ? scope.row.budget_zgs.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="预测现场外包工时（金额换算）" width="110" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.targ_xc_wbgs !== null ? scope.row.targ_xc_wbgs.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="预测二次流程外包工时（金额换算）" width="120" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.targ_ec_wbgs !== null ? scope.row.targ_ec_wbgs.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="预测总工时（含外包）" width="110" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.budget_zgs_ec !== null ? scope.row.budget_zgs_ec.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="实际直工工时" width="120" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.real_zggs !== null ? scope.row.real_zggs.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="实际间工工时" width="120" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.real_jggs !== null ? scope.row.real_jggs.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="实际总工时" width="110" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.real_zgs !== null ? scope.row.real_zgs.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="实际现场外包工时（金额换算）" width="110" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.real_xc_wbgs !== null ? scope.row.real_xc_wbgs.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="实际二次流程外包工时（金额换算）" width="120" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.real_ec_wbgs !== null ? scope.row.real_ec_wbgs.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="实际总工时（含外包）" width="110" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.real_zgs_ec !== null ? scope.row.real_zgs_ec.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="总工时差异" width="110" header-align="center" align="center">
          <template #default="scope">
            <span :style="{ color: scope.row.diff_gs !== null ? (scope.row.diff_gs > 0 ? 'deepskyblue' : 'orangered') : 'black' }">
              {{ scope.row.diff_gs !== null ? (scope.row.diff_gs > 0 ? '+' + scope.row.diff_gs.toLocaleString() : scope.row.diff_gs.toLocaleString()) : '-' }}
            </span>
          </template>
        </el-table-column>

        <el-table-column label="总工时差异率" width="120" header-align="center" align="center">
          <template #default="scope">
            <span :style="{ color: scope.row.diffrate_gs !== null ? (scope.row.diffrate_gs > 0 ? 'deepskyblue' : 'orangered') : 'black' }">
              {{ scope.row.diffrate_gs !== null ? (scope.row.diffrate_gs > 0 ? '+' + scope.row.diffrate_gs : scope.row.diffrate_gs) + '%' : '-' }}
            </span>
          </template>
        </el-table-column>

        <el-table-column label="预测 PPH（含现场 + 二次）" width="100" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.budget_pph_a !== null ? scope.row.budget_pph_a : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="实际 PPH（含现场 + 二次）" width="100" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.real_pph_a !== null ? scope.row.real_pph_a : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="PPH 达成率" width="110" header-align="center" align="center">
          <template #default="scope">
            <span style="color: deepskyblue;">{{ scope.row.ach_rate_a !== null ? scope.row.ach_rate_a + '%' : '-' }}</span>
          </template>
        </el-table-column>

        <el-table-column label="预测纯粹达成率" width="100" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.targ_budg_rate !== null ? scope.row.targ_budg_rate + '%' : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="实际纯粹达成率" width="100" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.pure_rate !== null ? scope.row.pure_rate + '%' : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="纯粹达成率差异" width="100" header-align="center" align="center">
          <template #default="scope">
            <span :style="{ color: scope.row.pure_dif !== null ? (scope.row.pure_dif > 0 ? 'deepskyblue' : 'orangered') : 'black' }">
              {{ scope.row.pure_dif !== null ? (scope.row.pure_dif > 0 ? '+' + scope.row.pure_dif : scope.row.pure_dif) + '%' : '-' }}
            </span>
          </template>
        </el-table-column>

        <el-table-column label="预算直间达成率" width="100" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.trag_zjg_rate !== null ? scope.row.trag_zjg_rate + '%' : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="实际直间达成率" width="100" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.real_zjg_rate !== null ? scope.row.real_zjg_rate + '%' : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="直间达成率差异" width="100" header-align="center" align="center">
          <template #default="scope">
            <span :style="{ color: scope.row.zjg_dif !== null ? (scope.row.zjg_dif > 0 ? 'deepskyblue' : 'orangered') : 'black' }">
              {{ scope.row.zjg_dif !== null ? (scope.row.zjg_dif > 0 ? '+' + scope.row.zjg_dif : scope.row.zjg_dif) + '%' : '-' }}
            </span>
          </template>
        </el-table-column>

        <el-table-column label="预测标准秒值" width="120" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.budget_sec !== null ? scope.row.budget_sec.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="入库标准秒值" width="120" header-align="center" align="center">
          <template #default="scope">
            {{ scope.row.finish_sec !== null ? scope.row.finish_sec.toLocaleString() : '-' }}
          </template>
        </el-table-column>

        <el-table-column label="标准秒值差异" width="120" header-align="center" align="center">
          <template #default="scope">
            <span :style="{ color: scope.row.std_time_dif !== null ? (scope.row.std_time_dif > 0 ? 'deepskyblue' : 'orangered') : 'black' }">
              {{ scope.row.std_time_dif !== null ? (scope.row.std_time_dif > 0 ? '+' + scope.row.std_time_dif : scope.row.std_time_dif) + '%' : '-' }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
#factory-progress-popup {
  --el-color-primary: green;
  --el-bg-color: black;
  --el-text-color-secondary: white;

  &:deep(.el-dialog) {
    border-radius: 2vh;
    box-shadow: 0 0 10px white;
  }

  &:deep(.el-dialog__title) {
    color: white;
    font-size: 2.5vh;
    font-weight: normal;
  }

  &:deep(.el-dialog__close) {
    color: white;
    font-size: 2.5vh;
  }

  .progress-option {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 1%;
    color: white;
    font-size: 2vh;
    font-weight: normal;

    .progress-option-item {
      &:deep(.el-input__wrapper) {
        background-color: black;
      }

      &:deep(.el-input__inner) {
        color: #ccc;
      }

      &:deep(.el-select__popper.el-popper) {
        background-color: black;
      }

      &:deep(.el-select-dropdown__item) {
        color: white;
        background-color: black;
      }

      &:deep(.el-select-dropdown__item.selected) {
        color: white;
        background-color: green;
      }

      &:deep(.el-select-dropdown__item.hover) {
        color: white;
        background-color: #666;
      }
    }
  }

  .el-table {
    --el-table-bg-color: rgba(0, 0, 0, 0.8);
    --el-table-border-color: rgb(100, 100, 100);
    --el-table-row-hover-bg-color: rgb(50, 50, 50);
    --el-table-tr-bg-color: rgba(0, 0, 0, 0.8);
    --el-table-text-color: white;
  }

  &:deep(.el-table__empty-block) {
    background-color: rgba(0, 0, 0, 0.8);
  }

  &:deep(.el-table--large .cell) {
    padding: 0 5px;
  }
}
</style>